<template>
	<view class="container">
		<view class="image-content" v-if="config && config.previewImg">
			<image mode="widthFix" :src="config.previewImg"></image>
		</view>

		<uni-row class="invite-wrapper">
			<uni-col :span="8">
				<button type="default" open-type="share" class="invite-col">
					<image src="/static/invite/wxfriend.png"></image>
					<view class="txt">分享给朋友</view>
				</button>
			</uni-col>
			<uni-col :span="8">
				<button type="default" @click="showTips" class="invite-col">
					<image src="/static/invite/wxcircle.png"></image>
					<view class="txt">分享给朋友圈</view>
				</button>
			</uni-col>

			<uni-col :span="8">
				<button type="default" @click="createPoster" class="invite-col">
					<image src="/static/invite/poster.png"></image>
					<view class="txt">分享海报</view>
				</button>
			</uni-col>
		</uni-row>

		<uni-row class="reward-wrapper">
			<uni-col :span="12">
				<view class="reward-col">
					<text class="num">0</text>
					<view class="tip">已成功邀请(人)</view>
				</view>
			</uni-col>
			<uni-col :span="12">
				<view class="reward-col">
					<text class="num">0</text>
					<view class="tip">已获得奖励(张)</view>
				</view>
			</uni-col>
		</uni-row>

		<uni-row class="log-head-wrapper">
			<uni-col>
				<view class="log-head-col">
					<image src="/static/invite/right.jpg"></image>
					<text class="txt">邀请记录</text>
					<image src="/static/invite/left.jpg"></image>
				</view>
			</uni-col>
		</uni-row>
		<uni-list>
			<template v-for="(item, index) in log">
				<uni-list-item v-if="item.status ===1" :title="item.inviteeName" :note="item.createTime"
					:rightText="item.reward + '元抵用卷'">
					<template slot="header">
						<template slot="header">
							<view class="invite-item-header">
								<view class="invite-item-img">
									<image :src="item.inviteeAvatar" />
								</view>
							</view>
						</template>
					</template>
				</uni-list-item>

				<uni-list-item v-else :title="item.inviteeName" :note="item.createTime" rightText="去提醒ta" clickable
					@click="onClick">
					<template slot="header">
						<template slot="header">
							<view class="invite-item-header">
								<view class="invite-item-img">
									<image :src="item.inviteeAvatar" />
								</view>
							</view>
						</template>
					</template>
				</uni-list-item>
			</template>
		</uni-list>

		<tui-tips ref="toast" backgroundColor="#FDD338" color="#3d3d3d"></tui-tips>
	</view>
</template>

<script>
	import {
		inviteConfig,
		inviteLog
	} from '@/api/activity.js'
	import {
		inviteCode
	} from '@/api/user.js'

	import {
		mapGetters
	} from 'vuex';

	export default {
		data() {
			return {
				inviteShow: true,
				circleShow: false,
				config: {},
				log: [],
				current: 1,
				size: 10,
				total: 0
			};
		},
		//发送给朋友
		onShareAppMessage: function() {
			var that = this;
			uni.report('onShareTimeline', '分享好友');
			return {
				title: this.config.title,
				path: '/subpkg/invite/accept?id=' + this.userInfo.id
			};
		},
		//分享到朋友圈
		onShareTimeline: function() {
			uni.report('onShareTimeline', '分享朋友圈');
			return {
				title: this.config.title,
				path: '/subpkg/invite/accept?id=' + this.userInfo.id
			};
		},
		onLoad() {
			inviteConfig().then(res => {
				this.config = res.data
				uni.setNavigationBarTitle({
					title: this.config.title
				})
			})
			if (this.isLogin) {
				this.getInviteLog();
			}
		},
		onReachBottom() {
			if (this.current * this.size >= this.total) return
			this.current++
			this.getInviteLog()
		},
		computed: {
			...mapGetters('m_user', ['isLogin', 'userInfo'])
		},
		methods: {
			showTips: function(e) {
				let options = {
					msg: '点击右上角选择可分享朋友圈~',
					duration: 3000
				};
				this.$refs.toast.showTips(options);
			},
			onClick() {
				console.log("s")
			},
			getInviteLog() {
				inviteLog(this.current, this.size).then(res => {
					this.total = res.data.total;
					this.log = [...this.log, ...res.data.records]
				})
			},
			/**
						 * 获取产品分销二维码
						 * @param function successFn 下载完成回调
						 *
						 */
						downloadFilePromotionCode: function(successFn) {
							let that = this;
							getProductCode(that.id)
								.then(res => {
									uni.downloadFile({
										url: that.setDomain(res.data.code),
										success: function(res) {
											that.$set(that, 'isDown', false);
											if (typeof successFn == 'function') successFn && successFn(res
												.tempFilePath);
											else that.$set(that, 'PromotionCode', res.tempFilePath);
										},
										fail: function() {
											that.$set(that, 'isDown', false);
											that.$set(that, 'PromotionCode', '');
										}
									});
								})
								.catch(err => {
									that.$set(that, 'isDown', false);
									that.$set(that, 'PromotionCode', '');
								});
						},
		}
	}
</script>

<style lang="scss">
	.image-content {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: -99999;

		image {
			width: 100%;
		}
	}

	.invite-wrapper,
	.reward-wrapper,
	.log-head-wrapper {
		margin-bottom: 10px;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	/* 支付宝小程序没有 demo-uni-row 层级 */
	/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	/deep/ .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.invite-col {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 40rpx 60rpx;
		position: relative;
		background-color: #fff;
		padding: 0 !important;

		image {
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 12rpx;
			opacity: 0.85;
		}

		.txt {
			color: rgba(61, 61, 61, 1);
			font-size: 30rpx;
		}
	}

	.reward-wrapper {
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.04);
		margin: 20rpx;
	}

	.reward-col {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 20rpx 60rpx;
		position: relative;

		.num {
			color: rgba(255, 101, 66, 1);
			font-size: 70rpx;
			margin-bottom: 12rpx;
		}

		.tip {
			color: rgba(61, 61, 61, 1);
			font-size: 22rpx;
		}
	}

	.log-head-col {
		text-align: center;
		padding: 20rpx 60rpx;

		image {
			width: 13px;
			height: 5px;
			margin-right: 12rpx;
			margin-left: 12rpx;
			opacity: 0.85;
		}

		.txt {
			color: rgba(61, 61, 61, 1);
			font-size: 36rpx;
		}
	}

	.invite-item-header {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.invite-item-img {
		margin-right: 12rpx;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		image {
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
			height: 40rpx;
			width: 40rpx;
		}
	}
</style>
